<template>
  <div class="classify">
    <top-search></top-search>
    <div class="classify-content flex-start-center">
      <ul class="classify-left">
        <li :class="['font26', active === item.id ? 'active primary' : '']" v-for="item in navData" :key="item.id" @click="change(item.id, item.name)">{{item.name}}</li>
      </ul>
      <div class="classify-right">
        <div class="header">
          {{title}}
          <i class="iconfont font32 icon-xiayibu"></i>
        </div>
        <div>
          <Modules/>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TopSearch from '@/components/project/nav/topSearch.vue';
import Modules from '@/components/project/commodity-panel/module.vue';
@Component({
  components: {
    TopSearch,
    Modules,
  },
})
export default class Home extends Vue {
  // 左侧菜单栏数据
  private navData: any[] = [
    {
      id: '1',
      name: '镇店之宝asdasdadasd',
    },
    {
      id: '2',
      name: '蔬菜',
    },
    {
      id: '3',
      name: '粮油',
    },
    {
      id: '4',
      name: '镇店之宝',
    },
    {
      id: '5',
      name: '蔬菜',
    },
    {
      id: '6',
      name: '粮油',
    },
    {
      id: '7',
      name: '镇店之宝',
    },
    {
      id: '8',
      name: '蔬菜',
    },
    {
      id: '9',
      name: '粮油',
    },
    {
      id: '10',
      name: '镇店之宝',
    },
    {
      id: '11',
      name: '蔬菜',
    },
    {
      id: '12',
      name: '粮油',
    },
    {
      id: '13',
      name: '镇店之宝',
    },
    {
      id: '14',
      name: '蔬菜',
    },
    {
      id: '15',
      name: '粮油',
    },
    {
      id: '16',
      name: '镇店之宝',
    },
    {
      id: '17',
      name: '蔬菜',
    },
    {
      id: '18',
      name: '粮油',
    },
  ];
  // 选中的菜单数据
  private active: string = this.navData[0].id;
  private title: string = this.navData[0].name;
  /**
   * 改变当前选中菜单
   */
  private change(id: string, name: string): void {
    this.active = id;
    this.title = name;
  }
}
</script>
<style lang="scss" scoped>
.classify {
  width: 100%;
  height: 100%;
  .classify-content {
    width: 100%;
    height: calc(100% - 94px);
    .classify-left {
      width: 150px;
      height: 100%;
      overflow-y: auto;
      margin-right: 20px;
      li {
        position: relative;
        width: 150px;
        height: 88px;
        padding: 0 20px;
        line-height: 88px;
        background: #fff;
        text-align: left;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .active {
        background: #f5f5f5;
      }
      .active::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -15px;
        width: 10px;
        height: 30px;
        background-color: #2cc38f;
      }
    }
    .classify-right {
      width: calc(100% - 170px);
      height: 100%;
      overflow-y: auto;
      .header {
        position: relative;
        width: 580px;
        height: 88px;
        padding: 0 20px;
        line-height: 88px;
        background-color: #ffffff;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .iconfont {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
}
</style>
